<template>
	<view style="width: 100%;display: flex;flex-direction: column;">
		<u-navbar back-text="" title="">
			<view style="width: 100%;display: flex;justify-content: center;font-weight: bold;font-size: 34rpx;">
				群聊信息
			</view>
			<view slot="right">
				<view style="margin-right: 40rpx;margin-top: 8rpx;">
					<image @click="gosharepage" src="/static/images/share.png" style="width: 50rpx;" mode="widthFix"></image>
				</view>
			</view>
		</u-navbar>
		<view v-if="info.users" style="background: white;display: flex;flex-wrap: wrap;width: 100%;padding: 15rpx;">
			<view v-for="(item,k) in info.users" class="avagitem">
				<u-avatar size="85" :src="$store.state.common.systemInfo.fileurl + 'avatar/' + item.uid + '.jpg'"
					mode="square"></u-avatar>
				<view style="font-size: 20rpx;width: 80rpx;margin-top: 5rpx;text-align: center;" class="u-line-1">
					{{item.name}}
				</view>
			</view>
			<view @click="goadduser" class="avagitem" v-if="myself.uid == group.user_id || myself.type == '管理员'">
				<view
					style="border: 1rpx solid #bcbcbc;border-radius: 8rpx;width: 90rpx;height: 90rpx;display: flex;align-items: center;justify-content: center;">
					<u-icon size="46" name="plus-circle"></u-icon>
				</view>
			</view>
			<view @click="goremoveuser" class="avagitem" v-if="myself.uid == group.user_id || myself.type == '管理员'">
				<view
					style="border: 1rpx solid #bcbcbc;border-radius: 8rpx;width: 90rpx;height: 90rpx;display: flex;align-items: center;justify-content: center;">
					<u-icon size="46" name="minus-circle"></u-icon>
				</view>
			</view>
		</view>

		<view style="background: white;margin-top: 20rpx;">
			<view
				style="display: flex;align-items: center;justify-content: space-between;padding: 25rpx;border-bottom: 1rpx solid #f3f3f3;height: 100rpx;">
				<view class="">
					群聊名称
				</view>
				<view @click="changegroupinfo" style="display: flex;align-items: center;">
					<view style="color: #939393;width: 350rpx;text-align: right;" class="u-line-1">
						{{info.name}}
					</view>
					<view style="margin-left: 8rpx;" v-if="myself.uid == group.user_id">
						<u-icon name="arrow-right" color="#939393"></u-icon>
					</view>
				</view>
			</view>
			<view
				style="display: flex;align-items: center;justify-content: space-between;padding: 25rpx;border-bottom: 1rpx solid #f3f3f3;height: 100rpx;">
				<view class="">
					群二维码
				</view>
				<view @click="gogroupewm" style="display: flex;align-items: center;">
					<image src="/static/images/ewm.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view style="margin-left: 8rpx;">
						<u-icon name="arrow-right" color="#939393"></u-icon>
					</view>
				</view>
			</view>
			<view
				style="display: flex;align-items: center;justify-content: space-between;padding: 25rpx;border-bottom: 1rpx solid #f3f3f3;height: 100rpx;">
				<view class="">
					群公告
				</view>
				<view @click="changegroupinfo" style="display: flex;align-items: center;">
					<view style="color: #939393;width: 350rpx;text-align: right;" class="u-line-1">
						{{group.note}}
					</view>
					<view style="margin-left: 8rpx;" v-if="myself.uid == group.user_id">
						<u-icon name="arrow-right" color="#939393"></u-icon>
					</view>
				</view>
			</view>
			<view
				style="display: flex;align-items: center;justify-content: space-between;padding: 25rpx;border-bottom: 1rpx solid #f3f3f3;height: 100rpx;">
				<view class="">
					群备注
				</view>
				<view @click="editnoteshowc" style="display: flex;align-items: center;">
					<view style="color: #939393;width: 350rpx;text-align: right;" class="u-line-1">
						{{info.note}}
					</view>
					<view style="margin-left: 8rpx;">
						<u-icon name="arrow-right" color="#939393"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="group.entertype == '申请进群' && myself.type != '普通成员'" style="background: white;margin-top: 20rpx;">
			<view
				style="display: flex;align-items: center;justify-content: space-between;padding: 25rpx;border-bottom: 1rpx solid #f3f3f3;height: 100rpx;">
				<view class="">
					入群申请
				</view>
				<view @click="goapplyg" style="display: flex;align-items: center;">
		
					<view
						style="color: #939393;width: 350rpx;text-align: right;display: flex;align-items: center;justify-content: flex-end;">
						<view v-if="count > 0" style="width: 35rpx;height: 35rpx;background: #ff1111;color: white;font-size: 20rpx;border-radius: 50rpx;display: flex;justify-content: center;align-items: center;">
							{{count}}
						</view>
						<u-icon name="arrow-right" color="#939393"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view style="background: white;margin-top: 20rpx;">
			<view
				style="display: flex;align-items: center;justify-content: space-between;padding: 25rpx;border-bottom: 1rpx solid #f3f3f3;height: 100rpx;">
				<view class="">
					群主
				</view>
				<view style="display: flex;align-items: center;">

					<view
						style="color: #939393;width: 350rpx;text-align: right;display: flex;align-items: center;justify-content: flex-end;"
						class="u-line-1">
						<u-avatar :src="$store.state.common.systemInfo.fileurl + 'avatar/' + group.user_id + '.jpg'"
							size="40"></u-avatar>
						<view style="margin-left: 6rpx;">
							{{group.master?group.master.name:'-'}}
						</view>
					</view>
				</view>
			</view>
			<view
				style="display: flex;align-items: center;justify-content: space-between;padding: 25rpx;border-bottom: 1rpx solid #f3f3f3;height: 100rpx;">
				<view class="">
					群管理
				</view>
				<view @click="gogroupmst()" style="display: flex;align-items: center;">
					<view
						style="color: #939393;display: flex;align-items: center;justify-content: flex-end;width: 460rpx;flex-wrap: wrap;">
						<u-avatar v-for="(itemu,kj) in groupusers" :src="$store.state.common.systemInfo.fileurl + 'avatar/' + itemu.uid + '.jpg'" size="40"></u-avatar>
					</view>
					<view style="margin-left: 8rpx;" v-if="myself.uid == group.user_id">
						<u-icon name="arrow-right" color="#939393"></u-icon>
					</view>
				</view>
			</view>
			<view
				style="display: flex;align-items: center;justify-content: space-between;padding: 25rpx;border-bottom: 1rpx solid #f3f3f3;height: 100rpx;">
				<view class="">
					进群方式
				</view>
				<view @click="changegroupinfo" style="display: flex;align-items: center;">
					<view style="color: #939393;width: 350rpx;text-align: right;" class="u-line-1">
						{{group.entertype}}
					</view>
					<view style="margin-left: 8rpx;" v-if="myself.uid == group.user_id">
						<u-icon name="arrow-right" color="#939393"></u-icon>
					</view>
				</view>
			</view>
			<view
				style="display: flex;align-items: center;justify-content: space-between;padding: 25rpx;border-bottom: 1rpx solid #f3f3f3;height: 100rpx;">
				<view class="">
					群状态
				</view>
				<view @click="changegroupinfo" style="display: flex;align-items: center;">
					<view style="color: #939393;width: 350rpx;text-align: right;" class="u-line-1">
						{{group.status}}
					</view>
					<view style="margin-left: 8rpx;" v-if="myself.uid == group.user_id">
						<u-icon name="arrow-right" color="#939393"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view @click="delgroup" v-if="myself.uid == group.user_id"
			style="font-weight: bold; background: white;margin-top: 20rpx;width: 100%;display: flex;justify-content: center;align-items: center;color: crimson;height: 100rpx;">
			解散群聊
		</view>

		<view @click="exitgroup" v-else
			style="font-weight: bold; background: white;margin-top: 20rpx;width: 100%;display: flex;justify-content: center;align-items: center;color: crimson;height: 100rpx;">
			退出群聊
		</view>

		<u-popup mode="center" v-model="editnoteshow" border-radius="12">
			<view style="width: 700rpx;display: flex;flex-direction: column;padding: 12rpx;">
				<view style="width: 100%;padding: 25rpx;font-size: 34rpx;font-weight: bold;color: #191919;">
					群备注
				</view>
				<view style="width: 100%;padding: 25rpx;padding-top: 0rpx;">
					<u-input focus v-model="editnote" style="padding: 10rpx;" border></u-input>
				</view>
				<view style="width: 100%;padding: 25rpx;padding-top: 0rpx;margin-top: 20rpx;">
					<u-button @click="changenote" type="primary" style="height: 90rpx;">确认更改</u-button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		sub
	} from '../../common/event';
	export default {
		data() {
			return {
				id: '',
				user: {},
				editnote: '',
				editnoteshow: false
			}
		},
		onLoad({
			id
		}) {
			this.id = id
			this.user = this.$store.state.user.user
			console.log(11478, this.info)
			console.log(114781, this.group)
			sub("socket_getremoveuser", this.beremove)
			sub("socket_groupchange", (e) => {
				this.info.users = e.leftusers
			})
		},
		computed: {
			...mapState({
				info: function(state) {
					const ret = state.friend.list.find(e => e.gid == this.id)
					console.log(1147, ret)

					return ret
				},
				myself: function(state) {
					const groupusers = state.friend.groups[this.id]
					const user = state.user.user
					for(let o of groupusers){
						if(o.uid == user.id){
							return o
						}
					}
					return {}
				},
				count: function(state) {
					const ret = state.friend.chatgroup.find(e => e.id == this.id)
					const gusers = state.friend.groups[this.id]
					const user = state.user.user
					const retuser = gusers.find(e=>e.uid == user.id)
					if(retuser.type == '普通成员'){
						return 0
					}
					const gapply = state.apply.glist.filter(e=>e.gid == this.id && e.status == '申请中')
					
					return gapply.length
				},
				groupusers: function(state) {
					const groupusers = state.friend.groups[this.id]
					if(groupusers){
						return groupusers.filter(e=>e.type == '管理员')
					}
					return []
				},
				group: function(state) {
					const ret = state.friend.chatgroup.find(e => e.id == this.id)
					console.log(11470, ret)
					const groupusers = state.friend.groups[this.id]
					if (groupusers) {
						const master = groupusers.find(e => e.uid == ret.user_id)
						ret.master = master
					}

					return ret
				}
			})
		},
		methods: {
			gogroupmst: function() {
				if (this.myself.uid == this.group.user_id) {
					uni.navigateTo({
						url: "/pages/friend/changegmaster?id=" + this.id
					})
				}
				
			},
			goapplyg: function() {
				uni.navigateTo({
					url: "/pages/friend/groupapply?id=" + this.id
				})
			},
			gogroupewm: function() {
				uni.navigateTo({
					url: "/pages/friend/groupewm?id=" + this.id
				})
			},
			editnoteshowc: function() {
				this.editnote = this.info.note
				this.editnoteshow = true
			},
			changenote: function() {
				this.$store.dispatch({
					type: "friend/setnote",
					payload: {
						note: this.editnote,
						id: this.info.id
					}
				})
				this.editnoteshow = false
			},
			goremoveuser: function() {
				uni.navigateTo({
					url: "/pages/friend/removeguser?id=" + this.id
				})
			},
			goadduser: function() {
				uni.navigateTo({
					url: "/pages/friend/addguser?id=" + this.id
				})
			},
			gosharepage: function() {
				uni.navigateTo({
					url: "/pages/friend/sharegroup?id="+this.id+"&name="+this.info.name
				})
			},
			beremove: function(e) {
				if (e.gid == this.id) {
					uni.switchTab({
						url: "/pages/index/index"
					})
				}
			},
			changegroupinfo: function() {
				if (this.myself.uid == this.group.user_id) {
					uni.navigateTo({
						url: "/pages/friend/changegroupinfo?id=" + this.id
					})
				}
			},
			exitgroup: function() {
				const _this = this
				uni.showModal({
					title:"退出群聊",
					content:"确定退出群聊吗?",
					success(res) {
						console.log(res)
						if(res.confirm){
							_this.exitgroupcon()
						}
					}
				})
			},
			exitgroupcon: async function() {
				const _this = this
				uni.showLoading({
					title:"退出群聊..."
				})
				const ret = await this.$u.delete(`friend/friend/exitgroup/${this.id}`)
				this.$store.commit(`friend/exitgroup`,{
					id:this.id
				})
				uni.hideLoading()
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			delgroup: function() {
				const _this = this
				uni.showModal({
					title:"解散群聊",
					content:"确定解散群聊吗?",
					success(res) {
						console.log(res)
						if(res.confirm){
							_this.delgroupcon()
						}
					}
				})
			},
			delgroupcon: async function() {
				const _this = this
				uni.showLoading({
					title:"退出群聊..."
				})
				const ret = await this.$u.delete(`friend/friend/deletegroup/${this.id}`)
				this.$store.commit(`friend/deletegroup`,{
					id:this.id
				})
				uni.hideLoading()
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
		}
	}
</script>

<style scoped>
	.avagitem {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 300rpx;
	}
</style>